<template>
  <div>
    <div
      ref="scrollContainer"
      class="-mt-46 h-[calc(100vh-0px)] custom-navbar-wrapper-f5f5f5 pt-46 flex flex-col overflow-y-auto"
      @scroll="handleScroll"
    >
      <!-- 提现数据 -->
      <div
        class="mt-20 mx-15 pt-25 px-15 rounded-10 text-white bg-no-repeat"
        :style="`background-image: url(${IMG_CDN_39}/spread/spread_index_top_bg.png);background-size: 100% 100%;`"
      >
        <div class="flex">
          <div>
            <div class="flex items-center">
              <div class="text-13 mr-4">可提现金额</div>
              <svg-icon name="icon-tishiqipao" :size="12" color="#fff" />
            </div>
            <div class="text-30 font-bold mt-5">
              <span class="text-14">¥</span>
              <span>{{ userFinance.balanceMoney }}</span>
            </div>
          </div>
          <div
            v-if="checkStatus !== 1 && companyStore.enableWithdrawAli"
            class="ml-auto leading-32 h-32 w-95 rounded-20 bg-white text-2614FF font-bold text-15 flex items-center justify-center"
          >
            提现
          </div>
        </div>
        <div
          class="mt-15 pb-15 pt-10 border-t-1 border-solid border-7469F7 text-13 flex items-center"
        >
          <svg-icon name="icon-zijindongjie" :size="14" color="#fff" />
          <div class="flex-grow-1 w-0 pl-3">
            待结算金额 ¥{{ userFinance.freezeMoney }}
          </div>
          <div class="ml-auto">提现明细</div>
          <svg-icon name="icon-gengduo" :size="13" color="#fff" class="pl-4" />
        </div>
      </div>
      <!-- 成为代理商，享受专属分佣 -->
      <div
        v-if="companyStore.enableOpenAgent && !userFinance.isAgent"
        class="mt-20 mx-15 pt-0 pr-10 pb-15 pl-15 flex items-center h-52 rounded-[10px_10px_0_0] text-4F301D"
        style="
          background-image: linear-gradient(90deg, #f4dabe 0%, #f1ca9f 100%);
        "
      >
        <svg-icon name="icon-chengweidailishang" :size="14" color="#4F301D" />
        <div class="text-12 font-bold pl-6">成为代理商，享受专属分佣</div>
        <svg-icon
          name="icon-gengduo"
          :size="12"
          color="#4F301D"
          class="ml-auto"
        />
      </div>
      <!-- 带货数据 -->
      <div
        class="mx-15 pt-15 px-15 bg-white rounded-10"
        :class="
          companyStore.enableOpenAgent && !userFinance.isAgent
            ? '-mt-15'
            : 'mt-15'
        "
      >
        <div class="flex items-center">
          <div class="text-14 font-bold">带货数据</div>
          <svg-icon name="icon-tishi" :size="14" color="#999" class="pl-6" />
        </div>
        <div class="mt-15 pb-20 flex">
          <div
            class="flex flex-col items-center justify-center pr-24 border-solid border-r-1 border-F5F5F5"
          >
            <div
              class="font-bold text-20 leading-28 flex items-center justify-center"
            >
              {{ userFinance.todayMoney }}
            </div>
            <div class="text-12">今日收入</div>
          </div>
          <div class="flex flex-grow-1 w-0">
            <div
              v-if="userFinance.isAgent"
              class="flex flex-col flex-grow-1 items-center justify-center w-0"
            >
              <svg-icon name="icon-wodekehu" :size="20" color="#333" />
              <div class="text-12">我的客户</div>
            </div>
            <div
              class="flex flex-col flex-grow-1 items-center justify-center w-0"
            >
              <svg-icon name="icon-shouyi" :size="20" color="#333" />
              <div class="text-12">我的收益</div>
            </div>
            <div
              class="flex flex-col flex-grow-1 items-center justify-center w-0"
            >
              <div class="relative">
                <svg-icon
                  name="icon-dailishangfenxiao"
                  :size="20"
                  color="#333"
                />
                <img
                  class="absolute -top-5 -right-15 w-24"
                  :src="`${IMG_CDN_39}/spread/agent_distribution_tip.png`"
                  alt="推"
                />
              </div>
              <div class="text-12">
                {{ userFinance.isAgent ? "代理商分销" : "推广分销" }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 查看如何推广带货 -->
      <div
        v-if="companyStore.enableOpenWxshopMarket"
        class="mx-15 px-15 py-13 mt-13 flex items-center bg-white rounded-10 text-14"
      >
        <div
          class="w-30 h-20 rounded-4 c-bg-2614FF-5 text-2614FF text-11 flex items-center justify-center"
        >
          Tips
        </div>
        <div class="ml-15">查看如何推广带货</div>
        <svg-icon name="icon-gengduo" :size="12" class="ml-auto" />
      </div>
      <!-- 推广带货列表 -->
      <div class="mx-15 mt-15 px-15 bg-white rounded-10 pt-15">
        <div class="font-bold text-14">视频号带货</div>
        <div v-if="wxShopItemData.records.length > 0">
          <div
            v-for="(item, index) in wxShopItemData.records"
            :key="index"
            class="py-15 border-b-1 border-solid border-F5F5F5 flex"
          >
            <van-image class="w-100 h-100" radius="10" :src="item.headImg" />
            <div class="pl-15 flex-grow-1 w-0">
              <div class="line-clamp-1 text-15">{{ item.title }}</div>
              <div class="mt-5 text-13 text-999999">
                售价: ¥{{ item.salePrice }}
              </div>
              <div class="mt-10 text-10 text-999999">达人佣金</div>
              <div class="mt-2 text-FF4A35 flex items-end">
                <div class="font-bold">
                  <span class="text-13">¥</span>
                  <span class="text-20">{{
                    payMoneySplit(item.commissionPrice).integerPart
                  }}</span>
                  <span
                    v-if="payMoneySplit(item.commissionPrice).decimalPart"
                    class="text-13"
                    >.{{
                      payMoneySplit(item.commissionPrice).decimalPart
                    }}</span
                  >
                </div>
                <div
                  class="ml-auto px-10 c-linear-purple h-25 rounded-20 text-white text-11 flex items-center justify-center"
                >
                  加入视频号橱窗分销
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          v-else
          class="bg-white rounded-10 h-100 flex items-center justify-center text-999"
        >
          暂无推广商品
        </div>
      </div>
      <!-- 加载状态 -->
      <div v-if="loading" class="py-15 text-center text-999 text-13">
        <van-loading size="24px" vertical>
          <span class="text-13 text-999 mt-10">加载中...</span>
        </van-loading>
      </div>
      <div v-else-if="noMore" class="py-15 text-center text-999 text-13">
        没有更多了
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { IMG_CDN_39 } from "@/constants";
import { onMounted, ref } from "vue";
import {
  getCheckStatus,
  getWxShopItemList,
  userFinanceInfo,
  UserFinanceInfoData,
  WxShopItemInfoData
} from "@/api/Spread";
import { useCompanyStoreHook } from "@/store/modules/company";
import { PageResponse } from "@/types";
import { payMoneySplit } from "../../utils";

// 用户财务信息
const userFinance = ref<UserFinanceInfoData>({
  balanceMoney: 0,
  commonDistType: 0,
  freezeMoney: 0,
  isAgent: 0,
  todayMoney: 0,
  totalMoney: 0,
  userPurchase: 0,
  withdrawMoney: 0,
  withdrawingMoney: 0
});

// 检查状态
const checkStatus = ref<number>(1);

// 视频号带货列表
const wxShopItemData = ref<PageResponse<WxShopItemInfoData>>({
  current: 1,
  pages: 0,
  records: [],
  size: 24,
  total: 0
});

// 加载状态
const loading = ref(false);
const noMore = ref(false);
const scrollContainer = ref<HTMLElement | null>(null);

// 用户财务信息接口
const userFinanceInfoPort = async () => {
  userFinance.value = await userFinanceInfo();
};

// 检查状态接口
const getCheckStatusPort = async () => {
  checkStatus.value = await getCheckStatus();
};

// 获取视频号带货列表接口
const getWxShopItemListPort = async () => {
  if (loading.value || noMore.value) return;

  loading.value = true;
  try {
    const params = {
      pageNo: wxShopItemData.value.current,
      pageSize: 24
    };
    const res = await getWxShopItemList(params);

    // 合并数据
    wxShopItemData.value.records = [
      ...wxShopItemData.value.records,
      ...res.records
    ];
    wxShopItemData.value.current = res.current;
    wxShopItemData.value.pages = res.pages;
    wxShopItemData.value.total = res.total;

    // 检查是否还有更多
    noMore.value = res.current >= res.pages;
  } catch (error) {
    console.error("加载商品列表失败:", error);
  } finally {
    loading.value = false;
  }
};

// 滚动处理
const handleScroll = () => {
  if (!scrollContainer.value || loading.value || noMore.value) return;

  const container = scrollContainer.value;
  const scrollHeight = container.scrollHeight;
  const scrollTop = container.scrollTop;
  const clientHeight = container.clientHeight;

  // 距离底部50px时加载
  if (scrollHeight - scrollTop - clientHeight < 50) {
    wxShopItemData.value.current += 1;
    getWxShopItemListPort();
  }
};

// 公司信息存储
const companyStore = useCompanyStoreHook();

onMounted(() => {
  userFinanceInfoPort();
  getCheckStatusPort();
  getWxShopItemListPort();
});
</script>

<style scoped lang="less"></style>
